<script lang="tsx">
import { useMenuStore } from '@/stores/menuStore';
import { defineComponent,ref } from 'vue';
import { RouteLocationNormalizedLoaded, Router, RouteRecord, RouteRecordRaw, useRoute, useRouter } from 'vue-router';
import MenuItem from './menuitem';
import {ArrowLeft, ArrowRight, ElemeFilled, MostlyCloudy } from 'eleicon';
import Logo from '@/assets/images/img/logo.png';
import bus from '@/utils/bus';
import Api from '@/api';


import gjj from '@/assets/images/img/gjj.jpg'
import router from "@/router";

export default defineComponent({
  props: {
    name: { type: String, required: true, default: '', descripton: '菜单名称' },
  },

  setup(props) {
    const router: Router = useRouter();
    const route: RouteLocationNormalizedLoaded = useRoute();
    const routerList: RouteRecordRaw[] = router.options.routes.filter((res) => {
      return res.name === props.name;
    });


    const answerCode = ref('');

    const menuStore = useMenuStore();

    menuStore.menuSelectAction({ path: route.fullPath, name: route.name as string }, props.name)
	const menutitle = {
		display: 'flex',
		alignItems: 'center'
	}


    const HeaderCompontent = () => {
      return menuStore.isCollapse ? (
        <div class="cem-logo" onClick={()=>{
	        router.push('/system')
        }}>
	        <img src={gjj} width={35} height={35}/>
        </div>
      ) : (
        <div class="cem-title" onClick={()=>{
	        router.push('/system')
        }} >
          {!menuStore.isCollapse && <div style={menutitle}><img src={gjj} width={50} height={50}/> <img src={Logo}  width= {150} style={{marginLeft: '10px'}}/></div>}
        </div>
      );
    };
	const position = {
		position: 'absolute',
		top: '50%',
		right: 0,
		fontSize: '30px',
		color: 'grey'
	}
	const Arrow = () => {
		return !menuStore.isCollapse ? (
			<el-icon onClick={()=> {menuStore.isCollapse = true}}  style={position}><ArrowLeft /></el-icon>
		) : (
			<el-icon onClick={()=> {menuStore.isCollapse = false}} v-else style={position}><ArrowRight /></el-icon>
		)
	}

  const AnswerComponent = () => {
    const style = {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'space-around',
      height: '20vh',
      marginTop: '30vh',
    }
    return (
        <div style={style}>
          <div>输入作答码</div>
          <el-input v-model={answerCode.value} placeholder="请输入作答码" style="width: 200px;"></el-input>
          <el-button type="primary" onClick={async () => {
            const res = await Api.getCoursewareIdByCwCode({coursewareCode: answerCode.value})
            if (res.data.code === 200) {
              bus.emit("toCoursewareDetail", res.data.data.id);
            }
          }} >
            开始作答
          </el-button>
        </div>
    )
  }

    return () => (
      <el-menu
        collapse-transition={true}
        default-active={route.fullPath}
        class={['component-el-menu']}
        collapse={menuStore.isCollapse}
      >
        <HeaderCompontent />
        {/* <MenuItem routerList={routerList} name={props.name} /> */}
        <AnswerComponent></AnswerComponent>
	      <Arrow/>
      </el-menu>
    );
  },
});
</script>
